<template>
    <view class="reg">
        <u-form labelWidth="90px" labelPosition="left" :model="regInfo" :rules="rules" ref="regForm">
            <u-form-item label="手机号" prop="phone" borderBottom="true" ref="item1">
                <u-input v-model="regInfo.phone" border="none" placeholder="请输入手机号"></u-input>
            </u-form-item>
            <u-form-item label="验证码" prop="code" borderBottom="true" ref="item1">
                <u-input v-model="regInfo.code" border="none" placeholder="请输入验证码"></u-input>
                <template #right>
                    <u-button class="btn" :disabled="tips.indexOf('后重新获取') > -1" @tap="getCode">{{ tips }}</u-button>
                </template>
            </u-form-item>
        </u-form>
        <u-button type="primary" text="立即注册" @click="toRegister"></u-button>
        <u-modal :show="show_code" title="浮城书斋" :content='content' @confirm="() => { show_code = false }"></u-modal>
        <u-toast ref="toastRef"></u-toast>
    </view>
</template>

<script lang="ts" setup>
import type { regPhoneInfo } from '@/model/api/login'
import CONTENT from '@/utils/constants'
import { ref, reactive } from 'vue'
import { regByPhone } from '@/api/register/register'
let regInfo: regPhoneInfo = reactive({
    phone: '',
    code: ''
})
const regForm: any = ref(null)
const toastRef: any = ref(null)
let tips = ref('获取验证码')

const seconds = ref(60)

let code = reactive({
    value: '',
    time: 0
})
const rules = reactive({
    phone: [{
        type: 'string',
        required: true,
        pattern: CONTENT.PATTERN.MOBILE,
        // 正则检验前先将值转为字符串
        transform(value: any) {
            return String(value);
        },
        message: '手机号格式不合法'
    }],
    code: [{
        type: 'string',
        required: true,
        message: '验证码格式不正确',
        // 正则检验前先将值转为字符串
        transform(value: any) {
            return String(value);
        },
        pattern: /^[0-9]{6}$/,
        trigger: ['blur', 'change']
    }]
})

const show_code = ref(false)

const content = ref('')

const toRegister = () => {
    regForm.value.validate().then(() => {
        if (regInfo.code != code.value) {
            content.value = '验证码错误'
            show_code.value = true
            return
        }
        if (new Date().getTime() - code.time > seconds.value * 1000) {
            content.value = '验证码已过期'
            show_code.value = true
            return
        }
        regByPhone(regInfo).then((res: any) => {
            if (res.code == 200) {
                toastRef.value.show({
                    type: 'success',
                    message: "注册成功",
                    duration: 3000,
                    position: 'top',
                    complete: function () {
                        uni.redirectTo({
                            url: '/pages/login/login'
                        });
                    }
                })
            }
        })
    })
}

const getCode = () => {
    if (regInfo.phone.length < 10) {
        content.value = '请先输入手机号'
        show_code.value = true
        return
    }
    code.value = String(Math.floor((Math.random() + 1) * 100000))
    code.time = new Date().getTime()
    let i = seconds.value
    let timeInter = setInterval(() => {
        if (i > -1) {
            tips.value = i + '秒后重新获取'
            --i
        } else {
            tips.value = '重新获取'
            clearInterval(timeInter)
        }
    }, 1000)
    content.value = '您的验证码是：' + code.value + ',验证码有效时间1分钟'
    show_code.value = true
}

</script>


<style lang="scss" scoped>
.reg {
    border-top: 2rpx solid #E4E4E4;
    padding: 0 20rpx;
}

.btn {
    height: 40rpx;
    line-height: 40rpx;
    font-size: 24rpx;
    background-color: $u-primary;
    color: #FFF;
    border: none;
}
</style>